<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script th:src="@{/ajax/libs/report/echarts/echarts.min.js}"></script>
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		var xvalue = 0;
		var yvalue = 0;
        function randomData() {
        	xvalue = xvalue + 1;
        	yvalue = Math.floor(Math.random()*100);
            return {
                name: xvalue,
                value: [
                	xvalue,yvalue
                ]
            };
        }

        var data = [];
        

        var option = {
            title: {
                text: '动态数据'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return params;
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                type: 'line',
                name: '模拟数据',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };
        myChart.setOption(option);
        
        setInterval(function () {

           data.shift();
           data.push(randomData());
           myChart.setOption({
               series: [{
                   data: data
               }]
           });
           
        }, 1000);
        

    </script>
</body>
</html>